<!--  -->
<template>
  <div class="confirm-order">
    <!-- 头部导航 -->
    <van-nav-bar
      title="确认订单"
      fixed
      :z-index="999"
      @click-left="onClickLeft"
    >
      <template #left>
        <van-icon name="arrow-left" color="#ffffff" size="24" />
      </template>
      <template #right>
        <van-icon name="scan" color="#ffffff" size="24" />
      </template>
    </van-nav-bar>
    <!-- 选择地址栏 -->
    <div class="choose-address">
      <!-- 如果有地址 -->
      <div class="has-address" v-if="address.name" @click="switchAddress">
        <van-icon name="location-o" size="24"></van-icon>
        <div class="center">
          <div class="top">
            <div class="name">收货人: {{address.name}}</div>
            <div class="tel">{{address.tel}}</div>
          </div>
          <div class="bottom nowrap">
            <span>收货地址: {{address.addressDetail}} </span>
          </div>
        </div>
        <van-icon name="arrow"></van-icon>
      </div>
      <!-- 无地址 -->
      <div class="no-address" @click="addAddress" v-else>
        <div class="title">请添加收货地址</div>
        <van-icon name="arrow" size="24"></van-icon>
      </div>
    </div>
    <divider />
    <!-- 商品列表 -->
    <div class="good-list" v-if="goodList">
      <div class="good-item" v-for="item in goodList" :key="item.id">
        <div class="avatar">
          <img
            :src="item.img || 'http://image5.suning.cn/uimg/b2c/newcatentries/0070061838-000000000104576473_2_400x400.jpg'"
            alt="商品封面图"
          />
        </div>
        <div class="info">
          <div class="name">
            {{item.name}}
          </div>
          <div class="service">七天无理由退货</div>
        </div>
        <div class="xiaoji">
          <div class="price">${{item.price}}</div>
          <div class="num">x3</div>
        </div>
      </div>
    </div>
    <!-- 底部结算栏 -->
    <div class="bottom-bar">
      <van-submit-bar :price="totalPrice*100" button-text="提交订单" @submit="onSubmit" />
    </div>
  </div>
</template>

<script>
import { NavBar, Icon, SubmitBar } from "vant";
import divider from "@/components/common/divider";
export default {
  data() {
    return {
      //address
      address:{}
    };
  },
  //生命周期 - 创建完成（访问当前this实例）
  created() {
   //取出地址
   this.getAddress();
  },
  //生命周期 - 挂载完成（访问DOM元素）
  mounted() {},
  methods: {
    onClickLeft() {
      this.$router.go(-1);
    },
    //获取地址
    getAddress(){
      //从vuex中拿地址信息
      const address = this.$store.state.addressInfo
      this.address = address
    },
    //添加收货地址
    addAddress() {
      this.$router.push({ name: "ManageAddress" });
    },
    //切换收货地址
    switchAddress() {
      this.$router.push({ name: "ManageAddress" });
    },
    //提交订单
    onSubmit() {
      console.log("准备提交订单");
      this.$router.push({name:'ConfirmPay'})
    },
  },
  computed:{
    goodList(){
      return this.$store.state.goodList
    },
    totalPrice(){
      let total = 0;
      this.goodList.forEach(item=>{
        total += item.price * item.num
      })
      return total;
    }
  },
  components: {
    [NavBar.name]: NavBar,
    [Icon.name]: Icon,
    [SubmitBar.name]: SubmitBar,
    divider,
  },
};
</script>
<style scoped>
.confirm-order {
  padding-top: 46px;
  padding-bottom: 56px;
  font-size: 16px;
}
/* 头部导航 */
.van-nav-bar {
  background-color: #ff6a00;
}
.confirm-order >>> .van-nav-bar__title {
  color: #fff;
  font-size: 18px;
}
/* 选择收货地址 */
.choose-address {
  padding: 0 10px;
}
.choose-address .title {
  font-weight: bold;
}
/* 有收货地址 */
.has-address {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 0;
}
.has-address .center{
  width:300px;
}
.has-address .center .top {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.has-address .center .bottom {
  font-size: 14px;
  margin-top: 6px;
}
/* 无收货地址 */
.no-address {
  display: flex;
  justify-content: space-between;
  padding: 10px 0;
}
/* 商品列表*/
.good-list {
  margin-top: 10px;
}
.good-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 10px;
  margin-bottom: 10px;
  background-color: #eee;
}
.good-item .avatar {
  padding: 10px 0;
  margin-right: 10px;
}
.good-item .avatar img {
  width: 80px;
  height: 80px;
}
.good-item .info {
  width: 200px;
}
.good-item .info .name {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
}
.good-item .info .service {
  font-size: 14px;
  color: #02b6fd;
  margin-top: 4px;
}
.good-item .xiaoji {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
.good-item .xiaoji > div {
  width: 50px;
  text-overflow: ellipsis;
  overflow: hidden;
}
.good-item .xiaoji .price{
  color:red;
}
.good-item .xiaoji .num {
  margin-top: 10px;
}
/* 底部结算栏 */
.bottom-bar .van-submit-bar {
  background-color: #02b6fd;
}
</style>